<template>
  <div class="echart" id="mychart" :style="myChartStyle"></div>
</template>

<script>
import * as echarts from "echarts";
import { getHomeList } from "@/api/index";

export default {
  name: 'ViewBar',
  data() {
    return {
      title: {
        name: '渠道统计'
      },
      xData: ["客户介绍", "微信", "朋友圈", "小红书", "抖音"], //横坐标
      yData: [10, 25, 57, 98, 108], //数据
      myChartStyle: { float: "left", width: "105%", height: "300px" } //图表样式
    };
  },
  mounted() {
    // 获取统计渠道数据
    this.handleValid()
    this.initEcharts();
  },
  methods: {
    // 获取统计渠道数据
    async handleValid() {
      const _data = await getHomeList();
      this.xData = _data.data[0].qvdaoList[0].xData
      this.yData = _data.data[0].qvdaoList[0].yData
    },



    initEcharts() {
      // 基本柱状图
      const option = {
        yAxis: {
          data: this.xData
        },
        xAxis: {},
        series: [
          {
            type: "bar", //形状为柱状图
            data: this.yData
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  }
};
</script>

